<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue demo 14 父组件访问子组件</title>
</head>
<body>
<div id="box">
    <div>
        <h1>父组件</h1>
        {{fatherMsg}}
    </div>
    <div>
        <child @child-msg-get="msgGet"></child>
    </div>
</div>

<template id="childTem">
    <div>
        <div>
            <h3>子组件</h3>
            {{childMsg}}
            <div>
                <h3>购物车:</h3>
                <input type="text" v-model="childMsg"/>
            </div>
            <p></p>
            <button @click="toSend">提交</button>
        </div>
    </div>
</template>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            fatherMsg: '24'
        },
        methods: {
            msgGet(msg) {
                this.fatherMsg = msg;
            }
        },

        components: {
            'child': {
                data() {
                    return {
                        childMsg: '',
                    }
                },
                methods: {
                    toSend() {
                        this.$emit('child-msg-get', this.childMsg);
                    },
                },
                template: '#childTem',
            }
        }
    })
</script>
</html>